<template>
    <div class="pageCon">
        <van-pull-refresh v-model="isLoading" @refresh="pullHandle">
            <div class="vipBox">
                <div>
                    会员：{{ user.isVip == 0 ? '暂未开通' : user.vipTime + '过期' }}
                </div>
                <div @click="toPage('/scoreList')">
                    积分<span>{{ user.taskScore }}</span> <van-icon name="arrow" />
                </div>
            </div>
            <div class="userCon">
                <div class="userInfo">
                    <img :src="user.userImg">
                    <img src="../../assets/img/jiaImg.png" class="jiaImgVip" alt=""
                        v-if="userType == 0 && user.isVip == 1">
                    <img src="../../assets/img/yi.png" class="jiaImgVip" alt="" v-if="userType == 1">
                    <img src="../../assets/img/zhu.png" class="jiaImgVip" alt="" v-if="userType == 2">
                    <div>
                        <span>{{ user.userName || '游客' }}
                        </span>
                        <div>{{ user.userSex || '男' }}
                            <span></span>UID：{{ user.userId }}
                        </div>
                    </div>
                    <van-icon name="edit" class="editIcon" @click="toPage('/userInfo')" />
                </div>
                <div class="userBtnBox" v-if="userType == 0">
                    <div>
                        <span>我的医生</span>
                        {{ myDoctorName || '暂无' }}
                    </div>
                    <div>
                        <span>助理医生</span>
                        {{ myHelperName || '暂无' }}
                    </div>
                    <div @click="toPage('/myFamily')">
                        <span>家庭成员</span>
                        {{ familyNum }}
                        <span class="checkBtn">查看成员</span>
                    </div>
                </div>
            </div>

            <div class="lineBox">
                <template v-if="userType != 0">
                    <div class="lineItem" @click="handle('code')">
                        <!-- <img src="../../assets/geren/duiHuan.png" alt=""> -->
                        我的专属二维码
                        <van-icon name="arrow" />
                    </div>

                    <div class="lineItem" @click="toPage('/doctorApplyList')" v-if="userType == 1">
                        <!-- <img src="../../assets/geren/huanZhe.png" alt=""> -->
                        今日就诊患者
                        <van-icon name="arrow" />
                    </div>
                </template>



                <div class="lineItem" @click="toPage('/message')">
                    <!-- <img src="../../assets/geren/yiJian.png" alt=""> -->
                    我的消息
                    <van-icon name="arrow" />
                </div>

                <template v-if="userType == 0">
                    <div class="lineItem" @click="handle('duiHuan')">
                        <!-- <img src="../../assets/geren/duiHuan.png" alt=""> -->
                        兑换身份
                        <van-icon name="arrow" />
                    </div>
                    <div class="lineItem" @click="toPage('/myApplyList')">
                        <!-- <img src="../../assets/geren/dangAn.png" alt=""> -->
                        申请列表
                        <van-icon name="arrow" />
                    </div>
                    <div class="lineItem" @click="toPage('/applyPage')">
                        <!-- <img src="../../assets/geren/dangAn.png" alt=""> -->
                        审核列表
                        <van-icon name="arrow" />
                    </div>
                    <div class="lineItem" @click="toPage('/buyHistory')">
                        <!-- <img src="../../assets/geren/duiHuan.png" alt=""> -->
                        购买记录
                        <van-icon name="arrow" />
                    </div>
                </template>
                <div class="lineItem" @click="toPage('/userIndex')">
                    <!-- <img src="../../assets/geren/dangAn.png" alt=""> -->
                    基本设置
                    <van-icon name="arrow" />
                </div>

                <div class="lineItem" @click="toPage('/about')">
                    <!-- <img src="../../assets/geren/dangAn.png" alt=""> -->
                    关于我们
                    <van-icon name="arrow" />
                </div>



                <!-- <div class="lineItem">
                <img src="../../assets/geren/yiJian.png" alt="">
                意见反馈
                <van-icon name="arrow" />
            </div>
            <div class="lineItem">
                <img src="../../assets/geren/about.png" alt="">
                关于我们
                <van-icon name="arrow" />
            </div> -->
            </div>


        </van-pull-refresh>


        <van-popup v-model="tipShow" round>
            <div class="duiBox">
                <div>
                    兑换身份
                </div>
                <div class="inputBox">
                    <span>兑换类型：</span>
                    <van-radio-group direction="horizontal" v-model="form.type">
                        <van-radio name="2" icon-size="16px">助理</van-radio>
                        <van-radio name="1" icon-size="16px">医生</van-radio>
                    </van-radio-group>
                </div>
                <div class="inputBox">
                    <span>兑换码：</span>
                    <input type="text" v-model="form.code" placeholder="请输入身份兑换码">
                </div>
                <div class="inputBox" v-if="form.type == 2">
                    选择医生
                    <span @click="showlist = true">{{ form.doctorName || '请选择' }}<van-icon name="arrow" /></span>
                </div>
                <div class="duiBtn">
                    <div @click="tipShow = false">取消</div>
                    <div @click="tipConfirm">提交</div>
                </div>
            </div>
        </van-popup>

        <van-popup v-model="showCode" round>
            <div class="codeBox">
                <img :src="codeImg" alt="">
                我的二维码
            </div>
        </van-popup>
        <div class="appNavBox">
            <div @click="toPage('/index')">
                <img src="../../assets/navIcon/home1.png" alt="">
                <span>首页</span>
            </div>
            <div>
                <img src="../../assets/navIcon/geren2.png" alt="">
                <span>我的</span>
            </div>
        </div>


        <van-action-sheet v-model="showlist" title="选择绑定的医生">
            <div class="doctorMain">
                <template v-if="selectList.length != 0">
                    <div v-for="( item, index ) in  selectList " :key="index">
                        <span>{{ item.doctorName }}</span>
                        <div>
                            <span @click="selectHandle(2, item)">选择</span>
                        </div>
                    </div>
                </template>


                <div class="emptyBox" v-else>
                    <img src="../../assets/tip_content.png">
                </div>

            </div>
        </van-action-sheet>

    </div>
</template>

<script>
import { updateUserType, erweima, geren } from '../../network/geren'
import { listDoctors } from '../../network/doctor'
import { getUserInfoById } from '../../network/user'
export default {
    name: 'HomeR',
    data() {
        return {

            // imgUrl:,
            myDoctorName: localStorage.myDoctorName,
            myHelperName: localStorage.myHelperName,
            isLoading: false,
            userType: localStorage.userType,
            user: JSON.parse(localStorage.user),
            userId: localStorage.userId,
            tipShow: false,
            codeNum: '',
            showCode: false,
            codeImg: '',

            form: {
                code: '',
                type: '',
                doctorId: '',
                doctorName: ''
            },
            showlist: false,
            selectList: [],
            doctorName: '',
            helperName: '',
            familyNum: 0,
            baseUrl: 'https://www.ccclkj.cn/zhibanzhang/resource/aimin/doctor/er/',
            buyFlag: false
        }
    },
    mounted() {

    },
    methods: {

        getDoctorList() {
            listDoctors().then(res => {
                if (res.flag) {
                    this.selectList = res.data
                    res.data.forEach(item => {
                        if (item.userId == localStorage.myDoctorId) {
                            this.form.doctorId = item.userId
                            this.form.doctorName = item.doctorName
                        }
                    })
                    console.log(this.selectList);
                }
            })
        },


        selectHandle(flag, obj) {
            if (flag == 1) {
                this.$router.push({
                    path: "/doctorDetail",
                    query: {
                        doctor: obj
                    },
                });
            } else {
                this.form.doctorId = obj.inuserId
                this.form.doctorName = obj.doctorName
                this.showlist = false
            }
        },

        toPage(url) {
            if (url == '/index') {
                if (this.userType == 2) {
                    url = '/aideIndex'
                }
            }
            this.$router.push(url)
        },

        handle(flag) {
            if (flag == 'duiHuan') {
                this.tipShow = true
                this.codeNum = ''
                this.getDoctorList()
            } else if (flag == 'code') {
                if (this.codeImg != '') {
                    this.showCode = true
                } else {
                    this.getCodeImg()
                }

            }
        },

        tipConfirm() {
            if (this.form.code == '') {
                this.$toast('请填写身份兑换码')
                return
            }

            if (this.form.type == 2 && this.form.doctorId == '') {
                this.$toast('请选择要绑定的医生')
                return
            }

            console.log(this.form);

            updateUserType({
                userId: this.userId,
                code: this.form.code,
                flag: this.form.type,
                doctorId: this.form.type == 1 ? this.userId : this.form.doctorId
            }).then(res => {
                if (res.flag) {

                    if (res.data.flag == 'error') {
                        this.$toast(res.data.msg)
                        return
                    }

                    this.$toast(res.data.msg)
                    this.tipShow = false
                    this.userType = res.data.userType
                    localStorage.userType = this.userType
                    this.user.userType = this.userType
                    localStorage.user = JSON.stringify(this.user)
                    console.log(res);
                } else {
                    this.$toast.fail('兑换失败，请重试')
                }
            })
        },

        getCodeImg() {
            var user = this.user
            erweima({
                doctorId: user.userType == 1 ? user.userId : user.doctorId,
                helperId: user.userType == 1 ? user.helperId : user.userId
                // doctorId: 12,
                // helperId: 2

            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.showCode = true
                    this.codeImg = this.baseUrl + res.data
                } else {
                    this.$toast.fail('获取失败')
                }
            })
        },

        getNum() {
            this.user = JSON.parse(localStorage.user)
            getUserInfoById({
                userId: localStorage.userId
            }).then(res => {
                this.isLoading = false
                if (res.flag) {

                    if (res.data.familyList != null && res.data.familyList.length != 0) {
                        this.familyNum = res.data.familyList.length
                    }
                }
            })
        },
        pullHandle() {
            this.isLoading = true
            this.getNum()
        },


    },
    created() {
        this.getNum()
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}








</script>

<style lang='less' scoped>
.pageCon {
    box-sizing: border-box;
    padding: 30px 40px;
}

.vipBox {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #858B90;
}

.vipBox>div>span::before {
    margin: 12px 8px 0 4px;
    display: inline-block;
    content: '';
    width: 2px;
    height: 20px;
    background: #858B90;
}

.userCon {
    box-sizing: border-box;
    width: 670px;
    background: #FFFFFF;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 30px;
}

.userBtnBox {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 34px 56px 44px 48px;
    width: 100%;
}

.userBtnBox>div {
    position: relative;
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;
    // flex: 1;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
    line-height: 82px;
}

.userBtnBox>div>span {
    margin-bottom: -40px;
    font-weight: 500;
    color: #999999;
}

.userBtnBox>div:nth-child(2)::after,
.userBtnBox>div:nth-child(2)::before {
    position: absolute;
    left: -58px;
    top: 42px;
    display: inline-block;
    content: '';
    width: 2px;
    height: 74px;
    background: #F2F2F2;
}

.userBtnBox>div:nth-child(2)::after {
    left: calc(100% + 58px);
}

.checkBtn {
    position: absolute;
    bottom: -8px;
    font-size: 20px;
    color: #999999;
}


.userInfo {
    position: relative;
    box-sizing: border-box;
    padding: 36px 46px 36px 36px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #f2f2f2;
}

.userInfo>img {
    margin-right: 34px;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background-color: rgba(51, 51, 51, 0.12);
}

.userInfo>div {
    height: 122px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 36px;
    color: #333333;
}

.jiaImgVip {
    position: absolute;
    left: 120px;
    bottom: 36px;
    width: 36px !important;
    height: 36px !important;
}

.editIcon {
    position: absolute;
    right: 46px;
    color: #ccc;
    font-size: 42px;
}

.userInfo>div>div {
    margin-top: 14px;
    display: flex;
    align-items: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #858B90;
}

.userInfo>div>div>span {
    margin: 0 16px;
    display: inline-block;
    width: 2px;
    height: 20px;
    background-color: #858B90;
}

.lineBox {
    padding-bottom: 300px;
    margin-top: 66px;
    width: 100%;
}

.lineItem {
    padding: 30px 0;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 32px;
    color: #333333;
    border-bottom: 2px solid #f2f2f2;
}

.lineItem:last-child {
    border-bottom: none;
}

.lineItem>img {
    margin-right: 28px;
    width: 48px;
    height: 36px;
}

.lineItem>.van-icon {
    position: absolute;
    right: 0px;
}


.inpBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
}

.inpBox>input {
    width: auto;
    text-align: center;
}

.codeBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 600px;
    height: 600px;
    font-size: 32px;
    color: #333;
}

.codeBox>img {
    margin-bottom: 20px;
    width: 80%;
    height: 80%;
    border-radius: 30px;
    background-color: #FFFFFF;
}



.duiBox {
    position: relative;
    width: 642px;
    // height: 590px;
    background: #FAFAFA;
    border-radius: 20px;
    color: #333333;
    line-height: 64px;
    font-family: Source Han Sans CN;

}

.duiBox>div:first-child {
    padding-top: 24px;
    text-align: center;
    width: 100%;
    font-weight: bold;
    font-size: 34px;

}

.duiBtn {
    // position: absolute;
    // bottom: 0px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 90px;
    border-top: 2px solid #f2f2f2;
}

.duiBtn>div {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 28px;
}

.duiBtn>div:last-child {
    border-left: 2px solid #f2f2f2;
}

.inputBox {
    box-sizing: border-box;
    padding: 24px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 28px;
}

.inputBox>input {
    width: 60%;
    border: none;
    outline: none;
    background: transparent;
    text-align: right;
}


.doctorMain {
    width: 100%;
    height: 40vh;

}

.doctorMain>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    padding: 22px 44px;
    border-bottom: 2px solid #f2f2f2;
    font-size: 28px;
    color: #275141;
}

.doctorMain>div>div {
    font-size: 24px;
    color: #05a3ff;
}

.doctorMain>div>div>span {
    margin-left: 24px;
}


.emptyBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-bottom: none;
}

.emptyBox>img {
    margin: 100px auto;
    // margin-top: 200px;

    width: 374px;
    height: 314px;
}
</style>